<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		
	</head>
	
	
	<body>
		<h1>黑名单管理界面</h1>
		<br/>
		<br/>

    	<div class="demoTable">
  			<span style="font-size:22px">黑名单搜索：</span>
       		<div class="layui-inline">
            	<input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
        	</div>
        	<button class="layui-btn" data-type="reload">搜索</button>
   		</div>
   		
		<table class="layui-hide" id="show_blackuser_table" lay-filter="test"></table>
		
		<script type="text/html" id="toolbarDemo">
  			<div class="layui-btn-container">
    			<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    			<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    			<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
				<button class="layui-btn layui-btn-sm" lay-event="delIsAll">取消拉黑</button>
  			</div>
		</script>
	</body>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
		<a class="layui-btn layui-btn-xs del layui-btn-xs" lay-event="del">取消拉黑</a>
	</script>
	
	<script type="text/javascript">
	  layui.use(['table'], function(){
		  var table = layui.table;
		  table.render({
		    elem:'#show_blackuser_table'
		    ,url:'/login/show_blackuser_table'
		    ,toolbar:'#toolbarDemo'
		    ,limit:10
		    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,cols: [[
		       {type: 'checkbox', fixed: 'left'}
		      ,{field:'userId', width:130, title: 'ID', sort: true,fixed: true}
		      ,{field:'userAccount', width:130, title: '用户名'}
		      ,{field:'userPassword', width:130, title: '用户密码'}
		      ,{field:'userName', width:130, title: '用户昵称'}
		      ,{field:'userSex', width: 130,title: '性别'}
		      ,{field:'userAddress', width: 130,title: '地区'}
		      ,{field:'userBirthdaystr', width: 200,title: '生日'}
		      ,{field:'userVip', width: 130,title: '是否VIP'}
		      ,{field:'userRegtimestr', width: 200,title: '注册时间'}
		      ,{fixed:'right', title: '操作', width:177,toolbar:"#barDemo"}
		    ]]
		    ,page:true
		  });
		  
		  				  

		  table.on('toolbar(test)', function(obj){
			    var checkStatus = table.checkStatus("show_blackuser_table");
			    switch(obj.event){
			      case 'getCheckData':
			        var data = checkStatus.data;
			        layer.alert(JSON.stringify(data));
			      break;
			      case 'getCheckLength':
			        var data = checkStatus.data;
			        layer.msg('选中了：'+ data.length + ' 个');
			      break;
			      case 'isAll':
			        layer.msg(checkStatus.isAll ? '全选': '未全选');
			      break;
			      case 'delIsAll':
			    	var data = checkStatus.data;
			    	if(data.length==0){
			    		parent.layer.msg('请先选择要取消黑名单的数据行！', {icon: 2});
			    		return ;
			    	}
			    	var ids = "";
			    	for(var i=0;i<data.length;i++){
			    		ids += data[i].userId+",";
			    	}
			    	layer.confirm('确定取消这些黑名单吗', function(index){			        
				        console.log(data);	
				        $.ajax({
					        	url:"/login/updateusers",
					        	type: "POST",
					        	data:{"ids":ids},
					        	dataType: "text",
					        	success: function(data){
					        		layer.msg("取消成功", {icon: 6});
					        		layer.close(index);	
					        		table.reload('show_blackuser_table', {
							        	  url: '/login/show_blackuser_table'
							        });				        		
		                        }
				        	});    			        
				     	});	
			      break;
			    };
			});
		  table.on('tool(test)', function(obj){
			    var data = obj.data //获得当前行数据
			    if(obj.event === 'detail'){
			   		layer.msg('用户ID：'+ data.userId + ' 的查看操作');	
			   		layer.open({
			    	      type: 2,
			    	      title: '用户详情界面',
			    	      shadeClose: true,
			    	      shade: false,
			    	      moveOut:true,
			    	      maxmin: true, //开启最大化最小化按钮
			    	      
			    	      offset: '100px',
			    	      area: ['893px', '600px'],
			    	      content: '/login/show_viewuser?userId='+data.userId
			    	});
			   		
			    } else if(obj.event === 'del'){
			        layer.confirm('确定取消此黑名单吗', function(index){			        
			        console.log(data.userId);	
			        $.ajax({
				        	url:"/login/updateuser",
				        	type: "POST",
				        	data:{"userId":data.userId},
				        	dataType: "text",
				        	success: function(data){
				        		layer.msg("取消成功", {icon: 6});
				        		layer.close(index);	
				        		
				        		table.reload('show_blackuser_table', {
						        	  url: '/login/show_blackuser_table'
						        });				        		
	                        }
			        	});    			        
			     	});			       
			    }			    
			});			
		  
		 
		});
  </script>

</html>